---
import IconChevronRight from '../icons/chevron-right.svg'
import IconHome from '../icons/home.svg'

interface Props {
  path: {
    href: string
    name: string
  }[]
}

let { path } = Astro.props
---

{
  path.length > 0 ? (
    <div class="breadcrumbs">
      <a aria-label="Homepage" class="link" href="/">
        <IconHome class="home" />
      </a>
      {path.map(({ href, name }) => (
        <>
          <IconChevronRight class="chevron" />
          <a class="link" href={href}>
            {name}
          </a>
        </>
      ))}
    </div>
  ) : null
}

<style>
  .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-inline-start: calc(0px - var(--space-xs));
  }

  .link {
    padding: var(--space-2xs) var(--space-xs);
    font: var(--font-xs);
    color: var(--color-content-primary);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: all 300ms;

    @media (hover: hover) {
      &:hover {
        color: var(--color-content-secondary);
        background: var(--color-background-primary-hover);
      }
    }
  }

  .home {
    inline-size: var(--size-icon-xs);
    block-size: var(--size-icon-xs);
  }

  .chevron {
    display: flex;
    inline-size: var(--size-icon-s);
    block-size: var(--size-icon-s);
  }
</style>
